<template>
    <div class="choujiangye">
      <div class="headera">
        <div class="yugao">
          <img src="../assets/116.png" alt="" class="yugaotu" />
        </div>
        <div class="tanxing">
          <div class="makebei">
            <div class="biankuang">
                   <div
                class="kapianb"
                v-for="(fuli,key) in fuliList"
                :key="fuli.lottery_id"
                :class="key=== index ? 'active' : ''"
              >
                <div class="shitou">
                  <img :src="fuli.lottery_image" alt="" class="shitoua" />
                </div>
                {{ fuli.lottery_name }}
              </div>
              <div class="lotteryBtn" @click="lotteryBtn">点我立即抽奖</div>
              <div class="switch">switch中奖概率高达30%</div>
            </div>
          </div>
          <div>
            <div class="lunbotu">
              <div class="weiguan">围观大奖</div>
  
              <div class="xunhuan">
                <div class="swiper-container">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <div
                        class="juejina"
                        v-for="item in result"
                        :key="item.user_name"
                      >
                        <div class="juejinb">
                          <img :src="item.lottery_image" alt="" class="juejinc" />
                        </div>
                        <div>{{ item.lottery_name }}</div>
                        <!--  <div>{{item.user_name}}</div> -->
                      </div>
                    </div>
                  </div>
                  <div class="swiper-button-prev"></div>
                  <div class="swiper-button-next"></div>
                  <div class="swiper-pagination"></div>
                </div>
              </div>
            </div>
            <div class="gundong">
              <div class="gundonga">中奖播报</div>
              <div id="test">
                <template
                  ><vue-seamless-scroll
                    :data="bobaoList"
                    class="seamless-warp"
                    :class-option="classOption"
                  >
                    <ul>
                      <li v-for="item in bobaoList" :key="(item+10).date">
                        恭喜-- <span>{{ item.user_name }}</span> --抽中--
                        <span>{{ item.lottery_name }}</span>
                      </li>
                    </ul></vue-seamless-scroll
                  ></template
                >
                <div id="test2"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import vueSeamlessScroll from "vue-seamless-scroll";
  import Swiper from "swiper";
  import "swiper/css/swiper.css";
  
  export default {
    name: "choujiang",
    data() {
      return {
        fuliList: [],
        jiangpingList: [],
        bobaoList: [],
        index: -1, //滚动下标
        times: 1, //滚动次数（每一个方格为一次）
        cycle: 50, //循环滚动的次数
        speed: 200, //转动速度
        result: [],
      };
    },
    mounted() {
      this.getTime();
      this.$nextTick(() => {
        new Swiper(".swiper-container", {
          /*   slidesPerView: 3,
        spaceBetween: 3,
        slidesPerGroup: 1, */
          autoplay: true, //自动播放
          //loop: true, // 循环模式选项
          //init: false,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
      });
      // console.log(swiper);
    },
    methods: {
      async getTime() {
        const res = await this.$API.singnatrue.getTime();
        console.log(res);
        this.fuliList = res.lottery.lottery_list;
        this.jiangpingList = res.lotteries;
        this.result = this.arrList();
        console.log(this.result)
        console.log(this.jiangpingList)
        this.bobaoList = res.user.users;
        // console.log(this.fuliList);
        // console.log(this.jiangpingList);
        console.log(this.bobaoList);
      },
      getRandom(n, m) {
        //该方法能产生[n,m]之间随机数
        let result = Math.floor(Math.floor(Math.random() * (m - n + 1) + n));
        return result;
      },
      getNumber() {
        let number = this.getRandom(0, 10);
        let caseNum = "";
        if (number === 0) {
          caseNum = 0; //粗略概率为10%
        } else if (number > 0 && number < 2) {
          caseNum = 1; //粗略概率为20%
        } else if (number >= 2 && number < 4) {
          caseNum = 2; //粗略概率为20%
        } else if (number >= 4 && number < 7) {
          caseNum = 3; //粗略概率为30%
        } else {
          caseNum = 4; //百分之20
        }
        return caseNum;
      },
      lotteryBtn: function () {
        console.log("点击");
        this.startRoll();
        this.index = -1;
        this.speed = 200;
        this.times = 1;
      },
      roll: function () {
        var index = this.index;
        var count = this.fuliList.length; //总长度
        index += 1;
        if (index > count - 1) {
          index = 0;
        }
        this.index = index;
      },
      startRoll: function () {
        this.times += 1;
        this.roll();
        if (this.times > this.cycle + 20) {
          clearTimeout(timer); //清除延迟函数
          this.times = 0;
        } else {
          if (this.times < this.cycle + 20) {
            this.speed -= 10; //加快转动速度
          } else if (this.times >= this.cycle) {
            this.speed += 20;
            // var ind = parseInt(Math.random() * 4, 0) || 0; // 随机产生一个中奖号码
            var ind = this.getNumber();
  
            console.log(ind);
            this.index = ind;
          }
          var timer = setTimeout(this.startRoll, this.speed);
        }
      },
      arrList() {
        const data = this.jiangpingList;
        const result = [];
        for (let i = 0; i < data.length; i += 3) {
          result.push(data.slice(i, i + 3));
        }
        return result;
      },
    },
  
    components: {
      //组件
      vueSeamlessScroll,
    },
    computed: {
      classOption() {
        return {
          step: 0.5, // 数值越大速度滚动越快
          limitMoveNum: this.bobaoList.length, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        };
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  .choujiangye {
    width: 900px;
    height: 900px;
    /*   border: 1px solid black; */
  }
  .headera {
    width: 900px;
    height: 800px;
    /*  border: 1px solid red; */
    /* background-size: 100%,100%;
    background-image: url(../assets/119.jpg); */
  }
  .yugao {
    width: 900px;
    height: 300px;
  }
  .yugaotu {
    width: 100%;
    height: 100%;
  }
  .makebei {
    width: 450px;
    height: 450px;
    border: 20px solid pink;
    margin-left: 15px;
  }
  .biankuang {
    width: 400px;
    height: 400px;
    border: 25px solid blue;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  .kapianb {
    margin-left: 10px;
    width: 120px;
    height: 120px;
    /*  border: 1px solid red; */
    text-align: center;
    margin-top: 10px;
  }
  .shitou {
    width: 60px;
    height: 60px;
    margin-left: 30px;
    margin-top: 20px;
  }
  .shitoua {
    width: 60px;
    height: 60px;
  }
  .lunbotu {
    width: 400px;
    height: 200px;
    /*   border: 1px solid red; */
  }
  .tanxing {
    display: flex;
  }
  .weiguan {
    width: 100px;
    height: 60px;
    text-align: center;
    font-size: 20px;
    color: blue;
    line-height: 60px;
  }
  .xunhuan {
    width: 350px;
    height: 120px;
    border: 1px solid red;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .juejina {
    width: 80px;
    height: 80px;
    /*   border: 1px solid red; */
    margin-left: 30px;
    flex-shrink: 0;
  }
  .juejinb {
    width: 40px;
    height: 40px;
  }
  .juejinc {
    width: 100%;
    height: 100%;
  }
  .gundong {
    width: 400px;
    height: 200px;
    /* border: 1px solid red; */
    overflow: hidden;
  }
  .gundonga {
    width: 100px;
    height: 50px;
    font-size: 20px;
    color: blue;
    /*   border: 1px solid red; */
    line-height: 50px;
  }
  .seamless-warp {
    width: 100%;
    height: calc(100% - 16px);
    overflow: hidden;
  
    ul {
      margin: 0;
      padding: 0;
    }
    li {
      color: red;
    }
    span {
      color: blue;
    }
  }
  .lotteryBtn {
    width: 100px;
    height: 100px;
    font-size: 30px;
    color: blue;
    text-align: center;
    background-color: red;
    margin-left: 20px;
    margin-top: 20px;
  }
  .active {
    color: red;
  }
  .switch {
    width: 260px;
    height: 100px;
    font-size: 22px;
    line-height: 100px;
    color: red;
  }
  .swiper-container {
    width: 600px;
  }
  .swiper-wrapper {
    width: 600px;
  }
  .shiyan {
    height: 400px;
    width: 900px;
    border: 1px solid red;
  }
  /* .shiyana{
    width:300px;
    height:300px;
  } */
  .swiper-slide {
    margin-top: 20px;
    width: 170px;
    display: flex;
  }
  </style>